<template>
    <div class="user-index">
      <div class="user-com-title" style="padding-left: 16px; margin: 10px 0; font-weight: 700;font-size: 24px;color: #333;">{{$t('page.user.recharge')}}</div>
      <div class="user-content">
        <div class="item text-info">
          <span class="label">{{$t('page.user.recharge')}}：</span>
          <input :placeholder="$t('page.user.recharge')" v-model="money" class="recharge_money">
        </div>


		 <div class="item text-info">
		  <div class="info">
		  <input type="radio" class="" name="type" :checked="usdt" @click="changeHeader(1)">
		  <span class="">{{$t('page.user.usdtcz1')}}</span>&emsp;
		  <input type="radio" class="" name="type" :checked="usdt2" @click="changeHeader(3)">
		  <span class="">{{$t('page.user.usdtcz2')}}</span>&emsp;
		  <input type="radio" class="" name="type" :checked="bank" @click="changeHeader(2)">
		  <span class="">{{$t('page.user.Bankcz3')}}</span>&emsp;
		 <!--  <input type="radio" class="" name="type" :checked="online" @click="changeHeader(4)"> -->
		  <!-- <span class="">Online Pay</span> -->
		  </div>
		</div>
		<div class="tips-box" v-if="usdt">
			<div class="item text-info">
			  <span class="label">{{$t('page.user.Primarynetwork')}}：</span>
			  <span class="txt line1" style="display: inline-block;vertical-align: middle">{{rechargeTypeData.usdt_main}}</span>
			</div>
			<div class="item text-info">
			  <span class="label">{{$t('page.user.Walletaddress')}}：</span>
			  <span class="txt">{{rechargeTypeData.usdt_addr}}</span>
				<span class="copy" @click="copyTBL()">{{$t('page.user.Copyaddress')}}</span>
			</div>
			<!-- <div class="item user-info">
			  <div class="info">
				<span class="">{{$t('page.user.ScanQRcode')}}：</span><br>
				<img :src="rechargeTypeData.usdt_picture"  style="width: 320px;height: 320px;">
			  </div>
			</div> -->
		</div>
		<div class="tips-box" v-if="usdt2">
			<div class="item text-info">
			  <span class="label">{{$t('page.user.Primarynetwork2')}}：</span>
			  <span class="txt line1" style="display: inline-block;vertical-align: middle">{{rechargeTypeData.usdt_main2}}</span>
			</div>
			<div class="item text-info">
			  <span class="label">{{$t('page.user.Walletaddress2')}}：</span>
			  <span class="txt">{{rechargeTypeData.usdt_addr2}}</span>
			  <span class="copy" @click="copyTBL2()">{{$t('page.user.Copyaddress')}}</span>
			</div>
			<!-- <div class="item user-info">
			  <div class="info">
				<span class="">{{$t('page.user.ScanQRcode')}}：</span><br>
				<img :src="rechargeTypeData.usdt_picture2"  style="width: 320px;height: 320px;">

			  </div>
			</div> -->
		</div>
		<div class="tips-box" v-if="bank">
			<div class="item text-info">
			  <span class="label">{{$t('page.user.Bankcz3')}}：</span>
			  <span class="txt line1" style="display: inline-block;vertical-align: middle"><a href="https://chat.ichatlink.net/widget/standalone.html?eid=c30a6d74560ff67b48209db36075c00e&language=en">{{$t("page.index.Online")}}</a></span>
			</div>
			<!-- <div class="item text-info">
			  <span class="label">{{$t('page.user.Bankdeposit')}}：</span>
			  <span class="txt">{{rechargeTypeData.bank_bankName}}</span>
			</div>
			<div class="item text-info">
			  <span class="label">{{$t('page.user.Bankname')}}：</span>
			  <span class="txt">{{rechargeTypeData.bank_name}}</span>
			</div> -->
		</div>
		<div class="item user-info" v-if="!online">
          <div class="info">
			<span class="">{{$t('page.user.rechargetu')}}：</span><br>
		    <div class="imageUrl">
		      <!-- 图片回填 -->
		      <ul v-if="pics" class="el-upload-list el-upload-list--picture-card">
		        <li tabindex="0" class="el-upload-list__item is-success">
		          <img :src="pics" alt="" class="el-upload-list__item-thumbnail">
		          <a class="el-upload-list__item-name"><i class="el-icon-document"></i></a>
		          <label class="el-upload-list__item-status-label"><i
		            class="el-icon-upload-success el-icon-check"></i></label>
		          <i class="el-icon-close"></i><i class="el-icon-close-tip">{{$t('page.index.pressdelete')}}</i><span
		          class="el-upload-list__item-actions">
		                          <span class="el-upload-list__item-delete" @click="handleRemove1()"><i
		                            class="el-icon-delete"></i></span></span>
		        </li>
		      </ul>
		    </div>
		    <el-upload  v-if="!pics"
		      :action="upLoadUrl"
		      list-type="picture-card"
		      :limit="1"
		      accept="image/*"
		      :before-upload="beforeAvatarUpload"
		      :on-success="handleSuccess"
		      :on-remove="handleRemove"
		      :on-exceed="handleExceed"
		    >
		      <i class="el-icon-plus"></i>
		    </el-upload>
          </div>
        </div>

		<div class="item user-info">
		  <div class="info">
			<span class="">{{$t('page.user.rechargezs')}}：</span><br>
		      <ul v-for="(item,index) in rechargeAttention"  class="el-upload-list el-upload-list--picture-card">
				<li class="tips-samll" >
					{{ item }}
				</li>
			</ul>
		  </div>
		</div>


        <div class="out-btn">
          <span @click="submitSub()">{{$t('page.user.ljrecharge')}}</span>
        </div>
      </div>
    </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {Message, MessageBox} from 'element-ui';
export default {
        name: "recharge",
        auth: "guest",
        data(){
          return {
            userInfo:{},
            fileList:[],
			rechargeTypeData:[],
			pics: '',
			money: '',
			recharType: 1,
			from: '',
			usdt:true,
			usdt2:false,
			bank:false,
			online:false,
		    upLoadUrl: process.env.BASE_URL + "/api/upload/image/file",
		    imgUrl: [],
			rechargeAttention: [],
		    uploadLimit: 1,
		    currentLimit: 1
          }
        },
      fetch({ store }) {
        store.commit("isBanner", false);
        store.commit("isHeader", true);
        store.commit("isFooter", true);
      },
      head() {
        return {
          title: this.$t('page.user.mybalance') + "-"+this.$store.state.titleCon
        }
      },
      beforeMount(){
		  this.getRecharge()
      },
      mounted() {
          let local = this.$cookies.get('auth.strategy')
          this.myHeaders = {
            'Authorization': this.$cookies.get(`auth._token.${local}`)
          }
          this.userInfo = this.$auth.user
      },
     methods:{
		/**
		 * 充值額度选择
		 */
		getRecharge() {
            let that = this;
			that.$axios.get("/api/common/recharge_quota",{})
				.then(res => {
					that.rechargeTypeData = res.data.bank || [];
					that.rechargeAttention = res.data.recharge_attention || [];
				})
				.catch(res => {
					that.$message.error(res)
				});
		},
		changeHeader(e) {
			console.log(e);
			if (e == 1) {
				this.recharType=1;
				this.usdt = true;
				this.usdt2 = false;
				this.bank = false;
				this.online = false;
			}else if (e == 2) {
				this.recharType=2;
				this.usdt = false;
				this.usdt2 = false;
				this.bank = true;
				this.online = true;
			}else if (e == 3) {
				this.recharType=3;
				this.usdt = false;
				this.usdt2 = true;
				this.bank = false;
				this.online = false;
			}else if (e == 4) {
				this.recharType=4;
				this.usdt = false;
				this.usdt2 = false;
				this.bank = false;
				this.online = true;
			}
		},
		copyTBL(url) {
			let copeData = this.rechargeTypeData.usdt_addr;
			this.webCopy(copeData);
		},
		copyTBL2(url) {
			let copeData = this.rechargeTypeData.usdt_addr2;
			this.webCopy(copeData);
		},
		 webCopy(e) {
		 	let transfer = document.createElement('input');
		 	document.body.appendChild(transfer);
		 	transfer.value = e; // 这里表示想要复制的内容
		 	transfer.focus();
		 	transfer.select();
		 	if (document.execCommand('copy')) {
		 		document.execCommand('copy');
		 	}
		 	transfer.style.display = 'none'
		 	document.body.removeChild(transfer);
			Message.success(this.$t('page.user.Copysucceeded'));
		 },
		/*
		 * 用户充值
		 */
		submitSub: function(e) {
			let that = this

			if (!that.money) {
				return Message.error(this.$t('page.user.PRechargeamount'));
			}
			if (!Number(that.money)) {
				return Message.error(this.$t('page.user.zqechargeamount'));
			}
			if (that.pics=='' && !that.online) {
				return Message.error(this.$t('page.user.screcharge'));
			}

			this.$axios.post("/api/user/recharge",{
				price: that.money,
				pic: that.pics,
				recharType:that.recharType,
				type: 'h5',
				recharge_id:0
			}).then(res => {
				console.log(res);
				if(res.data.type=="online"){
					let url = res.data.url;
					setTimeout(() => {
						location.href = url;
					}, 100);
				}else{
					let host = window.location.protocol+"//"+window.location.host;
					let url = host+`/user/balance?type=4`

					setTimeout(() => {
						location.href = url;
					}, 100);
				}
			}).catch(error=>{
				return Message.error(error);
			})
		},
		//上传图片前的图片验证回调
		beforeAvatarUpload(file) {
		  //图片格式
		  const isJPG = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg';
		  //图片大小
		  const isLt2M = file.size / 1024 / 1024 <= 2;
		  if (!isJPG) {
		    this.$message.error(this.$t('page.store.place2'));
		  }
		  if (!isLt2M) {
		    this.$message.error(this.$t('page.store.place4'));
		  }
		  const _this = this;
		  return isJPG && isLt2M;
		},
		handleExceed() {
		  this.$message.warning(this.$t('page.store.place5'));
		},

		handleRemove(file, fileList) {
		  this.imgUrl = [];
		  fileList.forEach(item => {
		    this.imgUrl.push(item.response.data.url);
		  });
		},
		handleRemove1() {
		  this.pics = ''
		},
		// 文件上传失败时的钩子
		handleError(err, file, fileList) {
		},
		handleSuccess(response) {
		  if (response.status === 200) {
		    this.pics = response.data.path;
		  } else if (response.status === 400) {
		    this.$message.error(response.msg);
		  }
		}
	 }
    }
</script>

<style lang="scss" scoped>
.copy{
	display: inline-block;
	width: 71px;
	height: 35px;
	line-height: 35px;
	border: 1px solid #CECECE;
	text-align: center;
	border-radius: 5px;
	background: aliceblue;
	cursor: copy;
}
.recharge_money{
	border: 1px solid #ECECEC;
	height: 44px;
	border-radius: 10px;
	text-indent: 20px;
	width: 50%;
}
.user-index{
  .user-content{
    padding:4px 0;
    .item{
      padding-left: 16px;
      position: relative;
      font-size: 14px;
      border-bottom: 1px dashed #DDDDDD;
      margin-right: 54px;
      .edit-txt{
        position: absolute;
        right: 0;
        bottom: 16px;
        color: #E93323;
        cursor: pointer;
      }
      .label{
        display: inline-block;
        width: 181px;
        color: #777777;
      }
      &.user-info{
        padding-bottom: 20px;
        .title{
          color: #282828;
          font-size: 18px;
        }
        .info{
          margin-top: 20px;
          color: #777777;
          font-size: 14px;
          img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            vertical-align: -44px;
            display: inline-block;
          }
        }
      }
      &.text-info{
        height: 70px;
        line-height: 70px;
        .edit-txt{
          top: 0;
        }
        .txt{
          color: #282828;
          width: 700px;
        }
      }
    }
    .out-btn{
      text-align: center;
      margin-right: 54px;
      span{
        display: inline-block;
        width: 130px;
        height: 40px;
        margin-top: 38px;
        line-height: 40px;
        text-align: center;
        background: #f89900;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
      }
    }
  }
}
.input-item{
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .code-box{
    width: 115px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    margin-left: 30px;
  }
}
.dialog-footer{
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 40px;
  border-top: 1px solid #EFEFEF;
  button{
    width: 190px;
    height: 45px;
  }
}
</style>
